<template>
    <div class="p-panel">
        <el-tabs v-model="activedName" @tab-click="handleTabsClick">
            <!--models-->
            <!--<el-tab-pane :label="$t('lang.models')" name="models">
                <models compact @selectionChange="handleModelSelect" @editEnableChange="v => (editEnable = v)" />
                <p-model-detail-form
                    v-show="currentModelIds.length || editEnable"
                    :ids="currentModelIds"
                    :readonly="!editEnable"
                    :status="!currentModelIds.length && editEnable ? 'add' : 'read'"
                    compact
                />
            </el-tab-pane>-->
            <!--jobs-->
            <el-tab-pane :label="$t('lang.jobs')" name="jobs" lazy>
                <jobs compact @selectionChange="handleJobSelect" @editEnableChange="handleEditEnableChange" />
                 <p-job-detail-form
                    v-show="isShowDetail"
                    :ids="currentJobs"
                    :readonly="!editEnable"
                    :status="detailStatus"
                    compact
                />
            </el-tab-pane>
            <!--vehicles-->
            <!-- <el-tab-pane :label="$t('lang.vehicles')" name="vehicles">
                <vehicles compact @selectionChange="handleVehicleSelect" @editEnableChange="handleEditEnableChange" />
                <p-vehicle-detail-form
                    v-show="isShowDetail"
                    :ids="selectedVehicles"
                    :readonly="!editEnable"
                    :status="detailStatus"
                    compact
                />
            </el-tab-pane> -->
            <!--contours-->
            <el-tab-pane :label="$t('lang.contours')" name="contours" lazy>
                <contours compact @selectionChange="handleContourSelect" @editEnableChange="handleEditEnableChange" />
                <p-contour-detail-form
                    v-show="isShowDetail"
                    :ids="currentContours"
                    :readonly="!editEnable"
                    :status="detailStatus"
                    compact
                />
            </el-tab-pane>
            <!--paths-->
            <el-tab-pane :label="$t('lang.paths')" name="paths" lazy>
                <paths compact @selectionChange="handlePathSelect" @editEnableChange="handleEditEnableChange" />
                <p-path-detail-form
                    v-show="isShowDetail"
                    :ids="selectedPaths"
                    :readonly="!editEnable"
                    :status="detailStatus"
                    compact
                />
            </el-tab-pane>
            <!--ranges-->
            <el-tab-pane :label="$t('lang.ranges')" name="ranges" lazy>
                <ranges compact @selectionChange="handleRangeSelect" @editEnableChange="handleEditEnableChange" />
                <p-range-detail-form
                    v-show="isShowDetail"
                    :ids="currentRanges"
                    :readonly="!editEnable"
                    :status="detailStatus"
                    compact
                />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script type="text/ecmascript-6">
import * as enums from '../store/status-enums.js';
import * as api from '../core/api.js';
import { mapState } from 'vuex';
import bus from "../utils/Eventbus";

import vehicles from '../views/components/vehicle/vehicles.vue';
import pVehicleDetailForm from '../views/components/vehicle/p-vehicle-detail-form.vue';
import contours from '../views/components/contour/contours.vue';
import pContourDetailForm from '../views/components/contour/p-contour-detail-form.vue';
import paths from '../views/components/path/paths.vue';
import pPathDetailForm from '../views/components/path/p-path-detail-form.vue';
import jobs from '../views/components/job/jobs.vue';
import pJobDetailForm from '../views/components/job/p-job-detail-form.vue';
import ranges from '../views/components/range/ranges.vue';
import pRangeDetailForm from '../views/components/range/p-range-detail-form.vue';
import i18n from '../lang/index.js';
const $t = i18n.global.t;

export default {
    name: 'p-panel',
    components: {
        // models,
        // pModelDetailForm,
        vehicles,
        pVehicleDetailForm,
        contours,
        pContourDetailForm,
        paths,
        pPathDetailForm,
        jobs,
        pJobDetailForm,
        ranges,
        pRangeDetailForm
    },
    props: {
        isDragMode: Boolean,
        tapeMode: Boolean
    },
    data() {
        return {
            trueName: this.$options.name,
            activedName: '',
            tabs: [
                { key: 'model', label: $t('lang.models') },
                { key: 'vehicle', label: $t('lang.vehicles') },
                { key: 'contour', label: $t('lang.contours') },
                { key: 'path', label: $t('lang.paths') },
                { key: 'script', label: $t('lang.scripts') },
                { key: 'event', label: $t('lang.events') },
                { key: 'job', label: $t('lang.jobs') },
                { key: 'variable', label: $t('lang.variables') },
                { key: 'setting', label: $t('lang.settings') },
                { key: 'user', label: $t('lang.users') },
                { key: 'logfile', label: $t('lang.logfiles') }
            ],
            // detail component id...
            currentModelIds: [],
            currentVehicleId: '',
            currentContourId: '',
            currentPathId: '',
            currentJobIds: [],
            editEnable: false
        };
    },
    computed: {
        ...mapState({
            openedBoxes: state => state.businessStatus.openedBoxes,
            currentJobs: state => state.businessStatus.selectedJobs,
            currentModels: state => state.businessStatus.selectedModels,
            currentContours: state => state.businessStatus.selectedContours,
            currentRanges: state => state.businessStatus.selectedRanges,
            selectedPaths: state => state.businessStatus.selectedPaths,
            selectedVehicles: state => state.businessStatus.selectedVehicles,
            isDrawContoursActive: state => state.businessStatus.isDrawContoursActive,
            isDrawRangesActive: state => state.businessStatus.isDrawRangesActive,
            isDrawPathsActive: state => state.businessStatus.isDrawPathsActive,
            isAltFnActive: state => state.businessStatus.isAltFnActive,
            showJobsTab: state => state.businessStatus.showJobsTab
        }),

        isShowDetail() {
            let h = this.editEnable;
            if (this.activedName === 'jobs') h = h || this.currentJobs.length === 1;
            else if (this.activedName === 'vehicles') h = h || this.selectedVehicles.length === 1;
            else if (this.activedName === 'paths') h = h || this.selectedPaths.length === 1;
            else if (this.activedName === 'contours') h = h || this.currentContours.length === 1;
            else if (this.activedName === 'ranges') h = h || this.currentRanges.length === 1;

            let m = this.activedName && this.activedName.slice(0, -1) || '';
            if (m && h && (this.detailStatus === 'add' || this.editEnable)) this.$store.commit(enums.OPEN_BOX, m + 'Detail');
            else if (m && this.detailStatus !== 'add') this.$store.commit(enums.CLOSE_BOX, m + 'Detail');
            // 当离开车辆标签或者添加或者编辑时，停止车辆遥控-2020.05.11 slq
            if (this.activedName !== 'vehicles' || this.detailStatus === 'add' || this.editEnable) {
                bus.emit('p-vehicle-remote-detail.stop');
            }
            return h;
        },
        detailStatus() {
            let status = 'read';
            if (this.activedName === 'jobs' && !this.currentJobs.length && this.editEnable) status = 'add';
            else if (this.activedName === 'vehicles' && (!this.selectedVehicles.length || this.selectedVehicles[0] === '-1') && this.editEnable) status =  'add';
            else if (this.activedName === 'paths' && (!this.selectedPaths.length || this.selectedPaths[0] === '-1') && this.editEnable) status = 'add';
            else if (this.activedName === 'contours' && !this.currentContours.length && this.editEnable) status = 'add';
            else if (this.activedName === 'ranges' && !this.currentRanges.length && this.editEnable) status = 'add';
            return status;
        }
    },
    watch: {
        activedName(val) {
            console.log('p-panel.watch.activedName.tabChange:', val);
            this.$store.commit(enums.OPEN_BOX_SINGLETON, val + 'Table');
            this.editEnable = false;
            bus.emit('p-panel.tabChange', val);
            this.$emit('tabChange', val);
        },
        isDrawContoursActive(val) {
            if (val) this.activedName = 'contours';
        },
        isDrawRangesActive(val) {
            if (val) this.activedName = 'ranges';
        },
        isDrawPathsActive(val) {
            if (val) this.activedName = 'paths';
        },
        isDragMode(val) {
            if (val) this.activedName = 'jobs';
        },
        tapeMode(val) {
            if (val) this.activedName = 'contours';
        },
        selectedVehicles(val) {
            // 当选择的车辆发生变化时，停止车辆遥控2020.05.11 slq
            console.log('p-panel.watch.selectedVehicles', val);
            bus.emit('p-vehicle-remote-detail.stop');
        },
        editEnable(val) {
            this.$emit('editChanged', val);
        },
        showJobsTab(val) {
            console.log('p-panel.watch.showJobsTab:', val);
            if (val) this.activedName = 'jobs';
        }
        // detailStatus(val) {
            // console.error(val);
            // if (val === 'add') bus.emit('vehicles.toggleRowSelection', ['-1']);
        // }
    },
    created() {
        bus.on(`${this.trueName}.editEnableChange`, this.handleEditEnableChange);
    },
    beforeDestroy: function() {
        bus.off(`${this.trueName}.editEnableChange`, this.handleEditEnableChange);
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            this.activedName = 'jobs';
        },
        handleEditEnableChange(val) {
            console.log('p-panel.handleEditEnableChange: ', val);
            this.editEnable = val;
        },
        handleTabsClick(tab) {
            if (tab.name !== 'jobs') bus.emit('jobs.toggleRowSelection', []);
            if (tab.name !== 'vehicles') bus.emit('vehicles.toggleRowSelection', []);
            if (tab.name !== 'contours') bus.emit('contours.toggleRowSelection', []);
            if (tab.name !== 'paths') bus.emit('paths.toggleRowSelection', []);
            if (tab.name !== 'ranges') bus.emit('ranges.toggleRowSelection', []);
            console.log('p-panel.handleTabsClick: ', tab.name);
        },
        async handleJobSelect(ids) {
            // if (ids && ids.length) this.currentJobIds = ids;
            this.editEnable = false;

            if (!ids || !ids.length) return;
            let id = ids[ids.length - 1],
                jobs = await api.getLocalResources('jobs'),
                vehicles = await api.getLocalResources('vehicles');
            if (!jobs || !jobs.list) return;
            let j = jobs.list.find(v => v.id === id);
            if (!j) return;
            let vehicleId = '';
            if (j.vehicleId) vehicleId = j.vehicleId;
            else if (j.vehicleKey) {
                let v = vehicles.list.find(v => new RegExp('^' + j.vehicleKey).test(v.id));
                if (v) vehicleId = v.id;
            }
            if (vehicleId) bus.emit('p-painter-vehicles.locateVehicle', vehicleId);
            console.log('p-panel.handleJobSelect: ', ids, j);
        },
        handleModelSelect(ids) {
            console.log('p-panel.handleModelSelect: ', ids);
            this.editEnable = false;
            if (ids && ids.length) this.currentModelIds = ids;
            else this.currentModelIds = [];
        },
        handleVehicleSelect(ids) {
            console.log('p-panel.handleVehicleSelect: ', ids);
            this.editEnable = false;
            if (!ids || !ids.length) return;
            // if (!ids || !ids.length || ids.length > 1) this.currentVehicleId = '';
            // else this.currentVehicleId = ids[0];
            bus.emit('p-painter-vehicles.locateVehicle', ids[ids.length - 1]);
        },
        handleContourSelect(ids) {
            console.log('p-panel.handleContourSelect: ', ids);
            this.editEnable = false;
            if (!ids || !ids.length) return;
            // bus.emit('contourEditor.show', ids);
            // if (!ids || !ids.length || ids.length > 1) this.currentContourId = '';
            // else this.currentContourId = ids[0];
            bus.emit('p-painter-contours.locateContour', ids[ids.length - 1]);
        },
        handleRangeSelect(ids) {
            console.log('p-panel.handleRangeSelect: ', ids);
            this.editEnable = false;
            if (!ids || !ids.length) return;
            bus.emit('p-painter-contours.locateRanges', ids[ids.length - 1]);
        },
        handlePathSelect(ids) {
            console.log('p-panel.handlePathSelect: ', ids);
            this.editEnable = false;
            if (!ids || !ids.length) return;
            // if (!ids || !ids.length || ids.length > 1) this.currentPathId = '';
            // else this.currentPathId = ids[0];
            bus.emit('p-painter-paths.locatePath', ids[0]);
        },
        handleScriptSelect(ids) {
            console.log('p-panel.handleScriptSelect: ', ids);
        },
        handleEventSelect(ids) {
            console.log('p-panel.handleEventSelect: ', ids);
        },
        handleVariableSelect(ids) {
            console.log('p-panel.handleVariableSelect: ', ids);
        },
        handleSettingSelect(ids) {
            console.log('p-panel.handleSettingSelect: ', ids);
        },
        handleUserSelect(ids) {
            console.log('p-panel.handleUserSelect: ', ids);
        },
        handleLogfileSelect(ids) {
            console.log('p-panel.handleLogfileSelect: ', ids);
        }
    }
};
</script>

<style lang="scss">
.p-panel {
    /*width: 38.2%;*/
    /*height: calc(100vh - 50px);*/
    /*overflow-y: auto;*/
    /*position: absolute;*/
    /*top: 0;*/
    /*right: 0;*/
    /*background: rgba(255, 255, 255, 0.8);*/
    padding-right: 5px;
    .el-tabs__header {
        background: whiteSmoke;
        margin: 0;
        .el-tabs__nav-wrap {
            padding: 0 10px;
            &::after {
                height: 1px;
            }
            .el-tabs__active-bar {
                background-color: #2763ff;
                height: 3px;
            }
            .el-tabs__item {
                color: #a1a4ab;
                height: 39px;
                &.is-active {
                    color: #1b223c;
                }
            }
        }
    }
    .el-table {
        max-height: 300px !important;
        overflow: auto;
    }

    @media screen and (min--moz-device-pixel-ratio: 0) {
        .el-tabs__content {
            padding-right: 4px;
        }
    }
    .el-collapse-item {
        padding-top: 5px;
        .el-collapse-item__header {
            font-size: 12px;
            font-weight: 700;
            color: #1b223c;
            height: 20px;
            line-height: 20px;
        }
    }
    .el-collapse-item__wrap {
        border-bottom: 1px solid #eaecf2;
        .el-collapse-item__content {
            font-size: 12px;
            padding-bottom: 5px;
        }
        .el-form-item {
            .el-form-item__label {
                font-size: 12px;
                color: #828691;
                line-height: 24px;
            }
            .el-form-item__content {
                font-size: 12px;
                .el-input {
                    font-size: 12px;
                }
            }
        }
    }
}
</style>
